<template>
    <div id="login">
        <div id="header">
            <div class="logo"><img src="../../assets/images/logo.png" alt="今生永恒网.网上纪念馆"></div>
            <div class="headright">
                <div align="right"><a href="/">返回首页</a></div>
            </div>
        </div>

        <div id="main">
            <div id="loginbox" >
                <div class="left"></div>
                <div class="rightgo" v-if="!isQRcode">
                    <div class="rightgo_item">
                        <div class="rightgo_item_title">用户名：</div>
                        <div class="rightgo_item_input">
                            <el-input
                                v-model="formData.account"
                                placeholder="请输入账号"
                                @keyup.enter="handleEnter"
                            ></el-input>
                            <!-- <input name="F_user" type="text" class="goname" id="uname" placeholder="用户名、手机号" maxlength="20" @keyup.enter="handleEnter" v-model="formData.account"> -->
                        </div>
                    </div>
                    <div class="rightgo_item">
                        <div class="rightgo_item_title">
                            <span>密码：</span>
                            <a href="/forget" class="right">忘记密码？</a>
                        </div>
                        <div class="rightgo_item_input">
                            <el-input
                                ref="passwordRef"
                                v-model="formData.password"
                                show-password
                                placeholder="请输入密码"
                                @keyup.enter="handleLogin"
                            ></el-input>
                            <!-- <input name="F_pw" type="password" class="gopw" placeholder="登录密码" maxlength="20" @keyup.enter="handleLogin" v-model="formData.password"> -->
                        </div>
                    </div>
                    <div style="display: flex; align-items: center;">
                        <el-checkbox v-model="remAccount">记住密码</el-checkbox>
                    </div>
                    <div class="rightgo_btn">
                        <el-button type="primary" size="large" :loading="isLock" @click="lockLogin">登录</el-button>
                    </div>
                    <div class="rightgo_register" @click="handleRegister">还不是今生永恒网会员？马上免费注册</div>
                    <div class="rightgo_changeType" @click="changeLoginType">{{ loginText }}</div>
                </div>
                <!-- <div class="rightgo rightgo-qr" v-else>
                    <div class="rightgo-qrcode">
                        <iframe
                            :src="qrcodeUrl"
                            frameborder="0"
                            scrolling="no"
                            width="300"
                            height="400"
                            sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups"
                        ></iframe>
                    </div>
                    <div class="rightgo_changeType" @click="changeLoginType">{{ loginText }}</div>
                </div> -->
                <!-- <qrcode-vue :value="qrcodeUrl" :size="200" level="H"></qrcode-vue> -->
            </div>
            
        </div>
        <p align="center" class="top50">
            <!-- <a href="/">首页</a>  |   <a href="/memorial/">网上纪念馆</a>   |  <a href="/quickreg/">快速建馆</a>  |   <a href="/culture/">民俗文化</a>  |   <a href="/life/">生命文化</a>  |   <a href="/info/">今生永恒资讯</a>  |   <a href="/help/">帮助中心</a>  |   <a href="/about/">关于今生永恒网</a> -->
        </p>
        <p align="center" class="footext">Copyright © 2006- 2025 <a href="http://www.cqjsyh.com">今生永恒网</a> www.cqjsyh.com All Rights Reserved. </p>

        <div style="display:none;"><a href="https://www.51.la/?comId=705212" title="51.La 网站流量统计系统" target="_blank"><span style="display:inline-block;background-color:#9CCC65;color:#fff;padding:2px 5px;font-family:arial;font-size:12px;font-weight:bold;">51La</span></a></div>

        <el-dialog v-model="isQRcode" width="600">
            <div style="width: 100%;display: flex;justify-content: center;">
                <iframe
                    :src="qrcodeUrl"
                    frameborder="0"
                    scrolling="no"
                    width="300"
                    height="400"
                    sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups"
                ></iframe>
            </div>
            <div class="rightgo_changeType" @click="changeLoginType">{{ loginText }}</div>
            
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, InputInstance } from 'element-plus'
import { computed, onMounted, reactive, ref, shallowRef, toRaw } from 'vue'
import QrcodeVue from 'qrcode.vue'; // 导入 qrcode.vue 组件
import { ACCOUNT_KEY } from '@/enums/cacheEnums'
import { PageEnum } from '@/enums/pageEnum'
import { useLockFn } from '@/hooks/useLockFn'
import useAppStore from '@/stores/modules/app'
import useUserStore from '@/stores/modules/user'
import cache from '@/utils/cache'
import { useRoute, useRouter } from 'vue-router'
const passwordRef = shallowRef<InputInstance>()
const formRef = shallowRef<FormInstance>()
const appStore = useAppStore()
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const remAccount = ref(false)
const isQRcode = ref(false) // 是否显示二维码
const qrcodeUrl = ref('') // 二维码地址
const loginText = ref('扫码登录')
const config = computed(() => appStore.config)
const formData = reactive({
    account: '',
    password: ''
})
const rules = {
    account: [
        {
            required: true,
            message: '请输入账号',
            trigger: ['blur']
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: ['blur']
        }
    ]
}
// 回车按键监听
const handleEnter = () => {
    if (!formData.password) {
        return passwordRef.value?.focus()
    }
    handleLogin()
}
// 登录处理
const handleLogin = async () => {
    await formRef.value?.validate()
    // 记住账号，缓存
    cache.set(ACCOUNT_KEY, {
        remember: remAccount.value,
        account: remAccount.value ? formData.account : ''
    })
    await userStore.login(formData)
    const {
        query: { redirect }
    } = route
    const path = typeof redirect === 'string' ? redirect : PageEnum.INDEX
    console.log('path', path, redirect)
    await router.push(path)
}
const { isLock, lockFn: lockLogin } = useLockFn(handleLogin)

onMounted(() => {
    console.log('onMounted', toRaw(route))
    const value = cache.get(ACCOUNT_KEY)
    if (value?.remember) {
        remAccount.value = value.remember
        formData.account = value.account
    }
})

const handleRegister = () => {
    router.push({ name: 'register' })
}

// 切换登录方式
const changeLoginType = async () => {
    
    isQRcode.value = !isQRcode.value
    if(isQRcode.value) {
        loginText.value = '账号密码登录'
        // let url = 'https://client-grave.shengxuankj.com/web/'
        let url = 'https://cqjsyh.com/web/'
        let obj = await userStore.getLoginQrCode(url)
        console.log(obj)
        qrcodeUrl.value = obj?.url
    }else{
        loginText.value = '扫码登录'
        
    }
}
</script>

<style scoped>
    #login {
        width: 100%;
        height: 100vh;
        font-size: 14px;
        font-family: "微软雅黑", "雅黑", "yahei", "黑体", "Arial";
        color: #4F4F4F;
        background: #F8F8F8 url(../../assets/images/bodybg.jpg);
        line-height: 180%;
    }
    #header {
        height: 118px;
        position: relative;
        width: 98%;
        max-width: 1200px;
        min-width: 1000px;
        margin: 0 auto;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo {
        padding-top: 5px;
    }
    .headright{
        /* position: absolute; */
        /* right: 0; */
        /* top: 35px; */
    }
    .headright a{
        color: #4F4F4F;
        text-decoration: none;
    }
    #main{
        clear: both;
        position: relative;
        width: 100%;
        margin: 0 auto;
        z-index: 1;
        margin-top: 30px;
    }
    #loginbox{
        width: 882px;
        height: 348px;
        margin: 0 auto;
        border: #E8E8E8 8px solid;
        background: #fff url(../../assets/images/loginbg.jpg) no-repeat left;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    #loginbox .left{
        /* width: 441px; */
        /* height: 348px; */
        float: left;
    }
    #loginbox .rightgo{
        float: right;
        margin-right: 30px;
        width: 307px;
    }
    #loginbox .rightgo ul {
        margin-top: 20px;
    }
    #loginbox .rightgo ul li {
        padding-bottom: 8px;
        color: #999;
        font-size: 16px;
        line-height: 180%;
    }
    #loginbox .rightgo ul li label{
        display: inline-block;
        width: 100px;
    }
    ul, li{
        list-style: none;
    }
    li {
        display: list-item;
        text-align: -webkit-match-parent;
        unicode-bidi: isolate;
    }
    label {
        cursor: default;
    }
    #loginbox .rightgo ul li .goname{
        height: 32px;
        line-height: 32px;
        width: 285px;
        font-size: 18px;
        padding: 0 10px;
        background: #fff url(../images/loginico.jpg) no-repeat 275px 8px;
        border: #ccc 1px solid;
        font-family: "寰蒋闆呴粦", "闆呴粦", "yahei", "榛戜綋", "Arial";
    }
    .login-item{
        display: flex;
        flex-direction: row;
        align-items: center;
        p{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
    .rightgo{
        margin-top: 20px;
    }
    .rightgo_item{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 10px;
    }
    .rightgo_item_title{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
    }
    .rightgo_btn{
        margin-top: 20px;
    }
    .rightgo_btn button{
        width: 100%;
        height: 40px;
        background-color: #FFA500;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .rightgo_btn button:hover {
        background-color: #FF8C00;
    }
    .goname, .gopw {
        height: 40px;
        line-height: 40px;
        width: 100%;
        font-size: 16px;
        padding: 0 10px;
        background: #fff url(../images/loginico.jpg) no-repeat 275px center;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .goname:focus, .gopw:focus {
        border-color: #FFA500;
        outline: none;
    }
    .rightgo_item_input{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .rightgo_item_input input{
        width: 100%;
    }
    .top50{
        margin-top: 50px;
    }
    a{
        color: #4F4F4F;
    }

    .rightgo_register{
        color: #4478B3;
        font-size: 16px;
        cursor: pointer;
        margin-top: 10px;
    }
    .rightgo_register:hover{
        color: #F16C20;
    }

    .rightgo_changeType{
        color: #333;
        font-size: 16px;
        cursor: pointer;
        text-align: center;
        margin-top: 5px;
        font-size: 14px;
    }
    .rightgo_changeType:hover{
        color: #F16C20;
    }
    
    .rightgo-qr{
        display: flex;
        align-items: center;
        flex-flow: column;
    }
    .rightgo .rightgo-qrcode{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
    }
    .rightgo .rightgo-qrcode image{
        width: 100%;
        height: 100%;
    }
</style>